<template>
	<view class="listOut">
		<view class="headerOut">
			<view v-for="item in titleOut" :key="item.type" class="titleIn "
			:class="item.type === select ? 'selectIns' : ''"
			@tap="select = item.type">
				{{item.name}}
			</view>
		</view>
		<swiper style="width: 100%;height: calc(100vh - 100rpx);" :current="select" @change="change" duration="10">
			<swiper-item v-for="i in titleOut" :key="i.type + 's'">
				<scroll-view style="width: 100%;height: 100%;" :scroll-y="true">
					<view class="content">
						<template v-if="arr.length > 0">
							 <!-- v-if="arr.length > 0" -->
							<view class="listBox" @tap="lookDetail(item.iemi)" v-for="(item, index) in arr" :key="index">
								<view class="boxTitle">
									<image src="../../static/index/danger.png" mode="" class="yujing"></image>
									<text>故障通报通知</text>
								</view>
								<view class="boxList">
									<!-- <text >故障时间</text> -->
									<image src="../../static/index/timeIcon.png" mode="" class="boxIcon"></image>
									<text >{{item.upTime.replace('T', ' ').split('.')[0]}}</text>
								</view>
								<view class="boxList">
									<!-- <text >故障类型</text> -->
									<image src="../../static/index/typeIcon.png" mode=""  class="boxIcon"></image>
									<text v-if="item.status ===  'off'" style="color: #F7B43F;">设备离线</text>
									<text v-if="item.status === 'error'" style="color: #F7B43F;">
										<text v-if="item.wareType === 1">放散设备：打开</text>
										<text v-if="item.wareType === 2">压力设备：压力报警</text>
										<text v-if="item.wareType === 3">过滤设备：过滤器堵塞</text>
										<text v-if="item.wareType === 4">气体设备：浓度预警</text>
									</text>
									<text v-if="item.wareType === 3 && item.status ===  'warn'" style="color: #F7B43F;">过滤设备：过滤器趋堵</text>
								</view>
							</view>
						</template>
						<view class="blankPage" v-else>
							<image src="../../static/index/noData.png" mode="" class="noData"></image>
							<view class="noText">暂无内容</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import {getList} from './js/api.js'
	export default{
		data () {
			return {
				arr: [],
				titleOut: [
					{
						name: '全部设备',
						type: '0'
					},
					{
						name: '放散设备',
						type: '1'
					},
					{
						name: '压力设备',
						type: '2'
					},
					{
						name: '过滤设备',
						type: '3'
					},
					{
						name: '气体设备',
						type: '4'
					}
				],
				select: '0'
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			change (e) {
				console.log(e.target.current)
				this.arr = []
				this.select = '' + e.target.current
				this.getList()
			},
			lookDetail (iemi) {
				uni.navigateTo({
					url: '../detail/detail?iemi=' + iemi
				})
			},
			getList () {
				let params = {
					type: this.select,
					unionid: uni.getStorageSync('unionid')
				}
				getList(params).then((res) => {
					if (res.code != 200) {
						uni.showModal({
							title: '提示',
							content: res.msg,
							confirmText:'确定',
							showCancel:false,
							success: (res) => {
								console.log(res)
							}
						})
					} else {
						this.arr = res.data
						// if (res.data.length > 0) {
						// 	for(let i = 0; i < 10; i++) {
						// 		this.arr.push(res.data[0])
						// 	}
						// }
						
					}
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.listOut{
		min-height: 100vh;
		background-color: #F6F6F6;
		overflow: hidden;
		.listBox{
			width: 690rpx;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 10px;
			margin: 20rpx auto 0;
			.boxTitle{
				width: 100%;
				height: 80rpx;
				// background: rgba($color: #1C80CF, $alpha: .1);
				// border-radius: 10rpx 10rpx 0px 0px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
				.yujing{
					width: 50rpx;
					height: 50rpx;
					margin: 0 20rpx;
				}
			}
			.boxList{
				width: calc(100% - 40rpx);
				margin: 20rpx auto 0;
				color: #999999;
				font-size: 28rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.boxIcon{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
				.green{
					color: #5BB85F;
				}
				.red{
					color: #EE2A0E;
				}
			}
		}
		.listBox:first-child{
			margin-top: 30rpx;
		}
		.blankPage{
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			.noData{
				width: 126rpx;
				height: 164rpx;
				margin: 300rpx auto 0;
			}
			.noText{
				color: #999999;
				font-size: 30rpx;
				margin-top: 30rpx;
			}
		}
		.headerOut{
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.titleIn{
				width: 20%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				color: #999999;
				font-size: 28rpx;
			}
			.selectIns{
				color: #333333;
				background: url() no-repeat;
				background-size: 100% 90rpx;
			}
		}
	}
</style>
